<template>
	<view class="onlineOrder">
		<form class="form" @submit="formSubmit" @reset="formReset">
			<view class="row b-b" v-if="fixType==2">
				<view class="title">维修类目</view>
				<view class="cont select">
					<input class="uni-input" :value="form.typeName" @focus="showSelectPicker" placeholder="请选择"/>
					<text class="cell-more iconfont icon-you"></text>
					<uni-class ref="selectPicker"
						:picker-list="classList"
						@onConfirm="onConfirmSelect" />
				</view>
			</view>
			<view class="selectList" v-if="form.fixType==2">
				<view class="item" v-for="(item,index) in selectList" :key="index">
					<text class="name">{{item.name}}</text>
					<text class="price">{{item.minprice}}-{{item.maxprice}}元</text>
					<text class="iconfont icon-delete" @click="deleteHandler(index)"></text>
				</view>
				<view class="item callFee">
					<text class="name">上门</text>
					<text class="price">{{form.callFee}}元</text>
				</view>
			</view>
			<view class="row b-b" v-if="!addressData.addressee&&isloadAddress" @click="toAddress('add')">
				<view class="title">去填写地址</view>
				<view class="cont"></view>
				<text class="cell-more iconfont icon-you"></text>
			</view>
			<block v-else>
				<view class="row b-b">
					<view class="title">联系人</view>
					<view class="cont">
						<input class="uni-input" :disabled="true" v-model="addressData.addressee" placeholder="请输入" :maxlength="10" />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">联系方式</view>
					<view class="cont">
						<input type="number" :disabled="true" class="uni-input" v-model="addressData.addresseePhone" placeholder="请输入" :maxlength="11" />
					</view>
				</view>
				<view class="row b-b" @click="toAddress('select')">
					<view class="title">地址</view>
					<view class="cont select">
						<view class="uni-input">{{addressData.region.join(' ')}}</view>
						<text class="cell-more iconfont icon-you"></text>
						<!-- <area-picker ref="areaPicker" :region-list="region" @onConfirm="onConfirm"></area-picker> -->
					</view>
				</view>
				<view class="row b-b">
					<textarea class="addressText" :disabled="true" v-model="addressData.address" placeholder="请填写详细地址" :maxlength="200" />
				</view>
			</block>
			<view class="orderText">
				<view class="title">维修内容</view>
				<view class="cont">
					<textarea
          v-model="form.repairContent"
          placeholder="请填写维修内容，方便找合适的师傅…"
          :maxlength="300"  />
				</view>
			</view>
			<view v-if="form.fixType==2" class="btn-tips">需交上门服务费{{margin}}元</view>
			<button class="btn-link" form-type="submit">去下单</button>
		</form>
		<pay-pop ref="payPicker" :order-id="orderId" :margin="true" @onConfirm="successFun" />
	</view>
</template>

<script>
	import areaPicker from "@/components/area-picker.vue"
	import selectPicker from "@/components/select-picker.vue"
	import UniClass from "./components/class.vue"
	import payPop from "@/components/pay-pop.vue"
	export default {
		components:{
			areaPicker,
			selectPicker,
			UniClass,
			payPop
		},
		data() {
			return {
				isloadAddress:false,
				addressData: {
					consigneeName:'',
					consigneeMobile:'',
					addressDetail:'',
					region:[]
				},
				form:{
					typeName:'',
					addressId:'',
					repairType:'', // 维修类目id，多个逗号拼接
					repairContent:'', // 维修内容
					orderType:1, // 传1
					fixType:null, // 1水电 2电器
					callFee:0 // 上门费
				},
				isSelect:false,
				region: ['北京市','北京市','东城区'],
				pickregion:['品牌1'],
				classList:[],
				classObj:{},
				selectList: [], // 选中的数组
				orderId:"" //下单后返回订单id
			}
		},
		onLoad(option){
			this.form.fixType = option.fixType||1
			this.listConsignee() // 获取收货地址
			this.getClass() // 类目
			this.getCallFee() // 上门费
		},
		computed:{
			pickerValue() {
				return this.isSelect?this.region.join(' '):''
			},
			margin() {
				return this.form.callFee
				// return this.selectList.reduce(function(pre, next) {
				// 	return pre + Number(next.minprice);
				// }, this.form.callFee);
			}
		},
		methods: {
			async getClass(){
				const {code,result} = await this.$apis.getApi('/order/repair',{fixType:this.form.fixType})
				if(code==200){
					this.classList = result
				}
			},
			async getCallFee(){
				const {code,result} = await this.$apis.getApi('/order/callFee',{})
				if(code==200){
					this.form.callFee = result
				}
			},
			// 删除类目
			deleteHandler(index){
				this.selectList.splice(index,1)
			},
			toAddress(type) {
				uni.navigateTo({
					url: type=='add'?`/userPages/addressManage?type=add&&source=1`:'/userPages/address?source=1'
				})
			},
			async listConsignee() {
				const { code,result } = await this.$apis.getApi('/address/getDefault',{})
				this.isloadAddress = true
				if(code == 200) {
					const region = [result.provinceCode,result.cityCode,result.districtCode]
					result.region = region
					this.addressData = result
					this.addressData.address = result.address.replace('|',' ')
				} else {
					this.addressData = {}
				}
			},
			// 省市区联动初始化
			showSelectPicker() {
				this.$refs.selectPicker.showPicker();
			},
			filterArr(data) {
				let selectIds = []
				let selectList = []
				for(let i in data) {
					if(selectIds.indexOf(data[i].id) == -1) {
						selectIds.push(data[i].id)
						selectList.push(data[i])
					}
				}
				return selectList
			},
			onConfirmSelect(res) {
				const data = this.selectList.concat(res)
				this.selectList = this.filterArr(data)
			},
			showThreePicker() {
				this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				this.isSelect = true
				this.region = e.map(item=>(item.name))
			},
			formSubmit() {
				// this.orderId = 1608
				// this.$refs.payPicker.showPicker()
				// return
				this.form.addressId = this.addressData.addressId
				this.form.repairType = this.selectList.map(item=>(item.id)).join(',')
				let data = { ...this.form }
				if(!data.repairType&&this.fixType==2){
					this.$api.msg('请选择维修类目');
					return;
				}
				if(!data.addressId){
					this.$api.msg('请选择收货地址');
					return;
				}
				if(!data.repairContent){
					this.$api.msg('请填写维修内容');
					return;
				}
				if(data.fixType==2) {
					data.margin = this.margin // 保证金
				} else {
					delete data.margin
					delete data.callFee
				}
				if(this.orderId) {
					this.$refs.payPicker.showPicker()
					return
				}
				this.$apis.postApi('/order/submit',data).then(({code,result,message}) => {
					if(code==200){
						if(this.form.fixType==1) {
							this.successFun()
						} else {
							this.orderId = result
							setTimeout(() => {
								this.$refs.payPicker.showPicker()
							}, 100);
						}
					} else {
						this.$api.msg(message);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			successFun(){
				this.$api.msg('下单成功');
				this.$api.prePage().loadData('refresh')
				setTimeout(()=>{
					uni.navigateBack()
				}, 800)
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>
<style lang='scss' scoped>
.onlineOrder{
	padding: 20upx;
}
.form{
	padding: 10upx 24upx;
	background: #fff;
	display: block;
  min-height: calc(100vh - 60upx);
  box-sizing: border-box;
  border-radius: 16upx;
	.btn-tips{
		font-size: 28upx;
		margin: 80upx 0 0upx;
		text-align: center;
	}
	.btn-link{
		height: 88upx;
		margin: 20upx 0 48upx;
	}
  .title{
    font-size: 30upx;
    color: #000000;
    font-weight: 400;
    width: 130upx;
    white-space: nowrap;
  }
	.row{
		padding:20upx 0;
		min-height: 90upx;
		background: #fff;
		display: flex;
		justify-content: center;
		position: relative;
		.cont{
			display: flex;
			align-items: center;
			position: relative;
			flex:1;
			text-align: right;
			textarea{
				height: 100upx;
				font-size: 30upx;
				text-align: left;
			}
		}
		.uni-input{
			width: 100%;
			font-size: 30upx;
		}
		.addressText{
      height: 120upx;
      width: 100%;
    }
	}
  .orderText{
    .title{
      margin: 30upx 0 15upx;
    }
    textarea{
      height: 264upx;
      width: 100%;
      padding: 24upx;
      background: #F6F9FF;
      border-radius: 16upx;
      font-size: 30upx;
      box-sizing: border-box;
    }
  }
	.upload-box{
		.title{
			margin: 40upx 0 20upx;
		}
	}
	.selectList{
		background: #F6F9FF;
		border-radius: 16upx;
		padding: 20upx 26upx;
		margin-top: 30upx;
		.item{
			font-size: 28upx;
			color: #666;
			height: 80upx;
			display: flex;
			align-items: center;
			&.callFee{
				padding-right: 80upx;
			}
			.name {
				flex:1
			}
			.price {
				width: 250upx;
				text-align: right;
			}
			
			.icon-delete{
				color: #666;
				width: 80upx;
				text-align: right;
				font-size: 28upx;
			}
		}
	}
	/deep/{
		.upload-content{
			.upload-add-btn,.upload-item{
				width: 320upx;
				height: 202upx;
			}
		}
	}
}
</style>
